<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 外层容器：form -->
     <form action="https://www.baidu.com">
        <!-- 输入框：input 通过type来设置外观-->
         <input type="text" placeholder="输入用户名" name="username">

         <br>
         <input type="password" placeholder="请输入密码" name="password">

         <br>
         <!-- 单选框，需要用相同的name进行编组 -->
         <input type="radio" placeholder="单选框" name="123" id="1"> 
         <!-- 双标签：label，在for中关联对应指定标签的id属性后，可以实现点击联动 -->
         <label for="1">第一个</label>
         <input type="radio" placeholder="单选框" name="123" id="2"> 
         <label for="2">第二个</label>
         <input type="radio" placeholder="单选框" name="123" id="3"> 
         <label for="3">第三个</label>

         <br>
         <!-- value代表着改变强的实际值 -->
        <input type="checkbox" id="sing" value="1"> <label for="sing">唱</label> 
        <input type="checkbox" id="dance" value="2"> <label for="dance">跳</label> 
        <input type="checkbox" id="rap"value3 > <label for="rap">rap</label> 

        <br>
        <!-- 文本域：textarea -->
        <textarea name="wd" id=""></textarea>

        <br>
        <!-- 按钮：button -->
         <button>按钮</button>
         <!-- type‘reset’可以重置按钮所在的form容器内部的所有标签 -->
         <button type="reset">重置</button>
         <!-- type‘提交’可以将按钮所在的from容器内部的标签的数据提交到form标签的action指向的地址中 -->
          <!-- 数据以query参数的形式 -->
         <button type="submit">提交</button>

    </form>

    <!-- 直接调用百度进行搜索 -->
     <form action="https://cn.bing.com/search" target="_blank">
        <input type="text" name="q">
        <button type="submit">提交</button>
     </form>
</body>
</html>